<template>
  <pro-layout
    v-model:collapsed="state.collapsed"
    v-model:selectedKeys="state.selectedKeys"
    v-model:openKeys="state.openKeys"
    :loading="loading"
    :menu-data="menuDatas"
    disable-content-margin
    style="min-height: 100vh"
    v-bind="proConfig"
  >
    <template #menuHeaderRender>
      <router-link :to="{ path: '/' }">
        <img :class="{ collapsed: state.collapsed }" src="../assets/logo.png" />
        <h1>专病管理</h1>
      </router-link>
    </template>
    <template #rightContentRender>
      <RightContent :current-user="currentUser" />
    </template>
    <template #menuItemRender="{ item }">
      <a-menu-item :key="item.path">
        <template #icon>
          <!-- <svg-icon v-if="item.meta.icon" :icon="item.meta.icon"></svg-icon> -->
          <icon-font v-if="item.meta.icon" :type="item.meta.icon" />
        </template>
        <router-link :to="{ path: item.path }">
          {{ item.meta.title }}
        </router-link>
      </a-menu-item>
    </template>
    <template #subMenuItemRender="{ item }">
      <a-sub-menu :key="item.path">
        <template #title>
          <icon-font v-if="item.meta.icon" :type="item.meta.icon" />
          <span>{{ item.meta.title }}</span>
        </template>
        <a-menu-item v-for="child in item.children" :key="child.path">
          <template #icon>
            <icon-font v-if="child.meta.icon" :type="child.meta.icon" />
          </template>
          <router-link :to="{ path: child.path }">{{ child.meta.title }}</router-link>
        </a-menu-item>
      </a-sub-menu>
    </template>
    <div class="layout-breadcrumb" v-if="router.currentRoute.value.path !== '/home'">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(route, index) in breadcrumb" :key="route.path">
          <span v-if="router.currentRoute.value.path === route.path">
            <HeartOutlined />
            {{ route.breadcrumbName }}
          </span>
          <router-link v-else :to="{ path: route.path }">
            <SmileOutlined />
            {{ route.breadcrumbName }}
          </router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <RouterView class="layout-content" :style="layoutContentStyle" v-slot="{ Component, route }">
      <Transition name="page" mode="out-in">
        <keep-alive :include="Array.from(store.userApp.keepAliveRoutes)">
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </Transition>
    </RouterView>
  </pro-layout>
</template>

<script setup lang="ts">
import { useRouter, RouterView, RouterLink } from 'vue-router'
import { getMenuData, clearMenuItem, type RouteContextProps } from '@ant-design-vue/pro-layout'
import { SmileOutlined, HeartOutlined } from '@ant-design/icons-vue'
// import IconFont from '@/components/IconFont/index.vue'
import store from '@/store'

// import { createFromIconfontCN } from '@ant-design/icons-vue';

// const IconFont = createFromIconfontCN({
//   scriptUrl: '//at.alicdn.com/t/c/font_4212498_cxpm6kb7q24.js',
// });

const router = useRouter()

console.log(router)

const menuDatas = computed(() => {
  return store.userApp.menuList
})

console.log('menuDatas', menuDatas)

// const pushOpenKey = (path: string) => {
//   console.log(path);
//   const i = state.openKeys.findIndex(v => {
//     return v === path;
//   });
//   if (i !== -1) {
//     state.openKeys.splice(i, 1);
//   } else {
//     state.openKeys.push(path);
//   }
//   console.log(state);
// };

const state = reactive<Omit<RouteContextProps, 'menuData'>>({
  collapsed: false, // default collapsed
  openKeys: [], // defualt openKeys
  selectedKeys: [] // default selectedKeys
})
const loading = ref(false)
const proConfig = ref({
  navTheme: 'dark',
  headerTheme: 'light',
  layout: 'side',
  fixedHeader: false,
  fixSiderbar: true,
  splitMenus: false
})
const breadcrumb = computed(() => {
  console.log(
    router.currentRoute.value.matched.concat().map((item) => {
      return {
        path: item.path,
        breadcrumbName: item.meta.title || ''
      }
    })
  )
  return router.currentRoute.value.matched.concat().map((item) => {
    return {
      path: item.path,
      breadcrumbName: item.meta.title || ''
    }
  })
})
const currentUser = reactive({
  nickname: 'Admin',
  avatar: 'A'
})

const layoutContentStyle = computed(() => {
  if (router.currentRoute.value.name === 'home') {
    return {
      height: 'calc(100vh - 48px)'
    }
  } else {
    return {
      height: 'calc(100vh - 88px)'
    }
  }
})

watch(
  router.currentRoute,
  () => {
    const matched = router.currentRoute.value.matched.concat()
    state.selectedKeys = matched.filter((r) => r.name !== 'index').map((r) => r.path)
    state.openKeys = matched
      .filter((r) => r.path !== router.currentRoute.value.path)
      .map((r) => r.path)
  },
  {
    immediate: true
  }
)
</script>

<style>
.ant-pro-global-header-collapsed-button {
  margin-left: 0px;
}
</style>
<style lang="less" scoped>
.layout-breadcrumb {
  height: 40px;
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
}
.layout-content {
  padding: 16px;
  overflow: hidden auto;
  position: relative;
}
.collapsed {
  transform: scale(0.7);
  margin-left: -14px;
}
</style>
